// 封装导航栏组件
<template
	>
  <div class="nav">
    <div class="left">
      <el-link v-if="!isLogin"
               target="_blank"
               @click="goToLogin">请登录</el-link>
      <el-link v-else
               @click="logOut">退出</el-link>
      <el-link type="primary"
               @click="goToRegister">注册会员</el-link>
    </div>
    <div class="right">
      <el-link type="success"
               @click="goToHome">首页</el-link>
      <el-link type="warning">消息中心</el-link>
      <el-link type="danger"
               @click="goToOrder">我的订单</el-link>
      <el-badge :value="nowCount">
        <el-link type="info">
          <router-link :to="{ path: '/shoppingCart' }">我的购物车<i class="el-icon-goods"></i></router-link>
        </el-link>
      </el-badge>
      <el-link>
        <router-link :to="{ path: '/shop' }"> 线下门店 </router-link>
      </el-link>
      <el-link>
        <router-link :to="{ path: '/personInfo' }"> 账户信息 </router-link>
      </el-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 'zlx',
    }
  },

  created() {},

  computed: {
    nowCount() {
      return this.$store.state.count
    },

    isLogin() {
      return this.$store.state.isLogin
    },
  },
  methods: {
    goToLogin() {
      this.$router.push('/login')
    },

    logOut() {
      this.$store.commit('$_removeStorage')
    },

    goToRegister() {
      this.$router.push('/register')
    },
    goToOrder() {
      this.$router.push('/order')
    },
    goToHome() {
      if (this.$route.path === '/home') return
      this.$router.push('/home')
    },
  },
}
</script>

<style lang="less" scoped>
.nav {
  background: rgb(248, 248, 248);
  padding: 10px;
  display: flex;
  align-items: space-around;
  border-bottom: 1px solid #d1d1d1;
  .left {
    flex: 1;
    .el-link {
      margin-left: 30px;
    }
  }
  .right {
    flex: 1;
    .el-link {
      margin-left: 30px;
    }
    el-icon-s-goods {
      margin: 2px 0 0 2px;
    }
  }
}
</style>
